<!--五族九宗图-->
<template>
	<div style="" class="m_center">
		<div class="i_c" v-for="(item, i) in list">
			<div class="i_" v-for="(child, i) in item">{{ child.val }}</div>
		</div>
	</div>

	<div-dox style="border-color: red;width: 100px;height: 100px;"></div-dox>
</template>

<script setup lang="ts" name="FiveChansIndex">
import { ref } from 'vue'
import { ElMessage, MessageParamsWithType } from 'element-plus'
import service from '@/utils/request'

import DivBox from './div-dox.vue'

import { findData } from '@/api/nb/genealogy/genealogy'

const fnFindData = () => {
	findData().then(res => {
		if (res.data) list.value = res.data
	})
}
fnFindData()
const list = ref([
	[{ val: '高祖' }],
	[{ val: '曾祖姑' }, { val: '曾祖' }, { val: '曾祖叔祖' }],
	[{ val: '从祖姑' }, { val: '祖姑' }, { val: '祖父' }, { val: '伯叔祖' }, { val: '从伯叔祖' }],
	[{ val: '从堂姑' }, { val: '堂姑' }, { val: '姑' }, { val: '父' }, { val: '伯叔' }, { val: '堂伯叔' }, { val: '从堂伯叔' }],
	[
		{ val: '从堂姑' },
		{ val: '从堂姊妹' },
		{ val: '堂姊妹' },
		{ val: '姊妹' },
		{ val: '已' },
		{ val: '兄弟' },
		{ val: '堂兄弟' },
		{ val: '从堂兄弟' },
		{ val: '族兄弟' }
	],
	[{ val: '从堂侄女' }, { val: '堂侄女' }, { val: '侄女' }, { val: '子' }, { val: '侄' }, { val: '堂侄' }, { val: '从堂侄子' }],
	[{ val: '堂侄孙女' }, { val: '侄孙女' }, { val: '孙' }, { val: '侄孙' }, { val: '堂侄孙' }],
	[{ val: '曾侄孙女' }, { val: '曾孙' }, { val: '曾侄孙' }],
	[{ val: '玄孙' }]
])
</script>

<style lang="scss" scoped>
.m_center {
	display: grid;
	align-content: center;
	justify-content: center;
	align-items: center;
	padding: 10px;
	height: calc(100vh);
}

.i_c {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.i_ {
	width: 80px;
	height: 80px;
	border: solid 2px black;
	float: left;
	margin-right: -2px;
	margin-bottom: -2px;
	text-align: center;
}
</style>
